<template>
    <view class="app-container order">
        <z-paging ref="paging" v-model="list" @query="queryList">
            <template #top>
                <zzk-nav :title="title"></zzk-nav>
            </template>
            <view class="order-list">
                <view class="order-item flexrow" v-for="item in list" :key="item.id">
                    <view class="text">
                        <text class="name">{{ item.goodsName }}</text>
                        <text class="txt">商户名称：{{ item.merchantName }}</text>
                        <text class="txt">数量：{{ item.quantity }}</text>
                        <text class="txt">{{ item.created }}</text>
                    </view>
                    <view class="right" v-if="type === 'LEASE'">
                        <view class="top flexrow">
                            <text class="unit">¥</text>
                            <text class="price">{{ convertFenToYuan(item.deposit) }}</text>
                        </view>
                        <view>
                            <text class="txt r">押金</text>
                        </view>
                    </view>
                    <view class="right" v-else-if="type === 'MIETE'">
                        <view class="top flexrow">
                            <text class="unit">¥</text>
                            <text class="price">{{ convertFenToYuan(item.totalPrice) }}</text>
                        </view>
                        <view>
                            <text class="txt r">租金合计</text>
                        </view>
                    </view>
                    <view class="right" v-else>
                        <view class="top flexrow">
                            <text class="unit">¥</text>
                            <text class="price">{{ convertFenToYuan(item.totalPrice) }}</text>
                        </view>
                        <view>
                            <text class="txt r">出售金额</text>
                        </view>
                    </view>
                </view>
            </view>
        </z-paging>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { orderList } from '@/api/order'
import { convertFenToYuan } from '@/utils/util'

const type = ref('')
const title = ref('')
const paging = ref(null)
const list = ref([])

onLoad((option) => {
    type.value = option.type
    if (option.type === 'LEASE') {
        title.value = '在租/押金信息'
    } else if (option.type === 'MIETE') {
        title.value = '已收租金'
    } else {
        title.value = '已售信息'
    }
})

const queryList = (pageNo, pageSize) => {
    const params = {
        page: pageNo,
        size: pageSize,
        status: 'EFFECTIVE'
    }
    if (type.value === 'BUY') {
        params.type = type.value
    } else {
        params.type = 'LEASE'
    }
    orderList(params).then(res => {
        paging.value.complete(res.records)
    })
}
</script>

<style lang="scss" scoped>
.order {
    &-list {
        padding: 20rpx $zzk-margin 0;
    }
    &-item {
        padding: 24rpx;
        border-radius: 16rpx;
        background-color: #fff;
        margin-bottom: 20rpx;
        align-items: center;
        .text {
            flex: 1;
        }
        .name {
            font-size: 32rpx;
            font-weight: 700;
            line-height: 48rpx;
        }
        .txt {
            font-size: 28rpx;
            line-height: 48rpx;
            color: #999;
            &.r {
                text-align: right;
                font-size: 24rpx;
            }
        }
        .top {
            padding: 8rpx 0;
            justify-content: flex-end;
        }
        .unit {
            font-size: 24rpx;
            color: $u-error;
            line-height: 24rpx;
            padding-top: 8rpx;
        }
        .price {
            font-size: 32rpx;
            color: $u-error;
            line-height: 32rpx;
        }
    }
}
</style>